<template>
	<div id="tml">
	<!--1.0 图片分类 -->

		<div id="cate">
			<ul v-bind = "{style:'width:'+ulwidth+'px'}">
				<li @click = getimages(0)>全部</li>
				<li v-for = 'item in cates' @click = getimages(item.id)>{{item.title}}</li>
			</ul>
		</div>

		<!-- 2.0图片列表 -->
		<div id="imglist">
			<ul>
				<li v-for="item in list">
					<img v-lazy="item.img_url">
					<div id="desc">
						<h5 v-text="item.title"></h5>
						<p v-text="item.zhaiyao"></p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return {
				cates:[],//存贮图片分类数据
				ulwidth:320,
				list:[]//存贮图片列表数据

			}
		},
		created(){
			// 获取图片分类数据
			this.getcates();
			// 加载图片数据
			var all = 0;//获取所有数据
			this.getimages(all)
		},
		methods:{
			// 2.0
			getimages(cateid){
				cateid = cateid ||0;
				var url = this.$common.apidomain+'/api/getimages/'+cateid;
				this.$http.get(url).then(function(res){
					var con = res.body;
					if(con.status!=0){
						this.$common.Toast(con.message);
						return;
					}
					this.list = con.message;
				})
			},

			// 1.0
			getcates(){
				var url = this.$common.apidomain+'/api/getimgcategory';
				this.$http.get(url).then(function(res){
					var com = res.body;
					if(com.status!=0){
						this.$common.Toast(com.message);
						return;
					}
					this.cates = com.message;
					// 计算ul的宽度
					var w = 62;
					this.ulwidth = w*(com.message.length+1);

				})
			}
		}
	}
</script>
<style scoped>
	#cate{
	
		overflow-x: auto;
	}
	
	#cate::-webkit-scrollbar {display:none}
	#cate ul{
		margin: 0px;
		padding-left: 10px;
	}
	#cate li{
		cursor:pointer;
		list-style: none;
		display: inline-block;
		color:#0094ff;
		font-size: 14px;
		padding-left: 6px;
	}

	/*图片列表样式*/
	#imglist{

	}
	#imglist ul {
		padding-left: 0px;
	}
	#imglist li{
		list-style:none;
		position: relative ;
	}
	#imglist img{
		width:100%;
		height: 300px;
	}

	#desc{
		width: 100%;
		background-color: rgba(0,0,0,0.2);
		position: absolute;
		bottom: 2px;
		left: 0px;
	}

#desc h5{
	color: #ffffff;
	font-weight: bold;
}
#desc p{
	color:#fff;
}

image[lazy=loading] {
	width: 40px;
	height: 300px;
	margin: auto;
}

</style>